<template>
  <div id="app">
    <div>
      <span>图书名称:</span>
      <!-- //@blur.native.capture="checkinput" -->
      <input v-model="form.name"  @input="checkinput()"  type="text"  />
    </div>
    <div>
      <button @click="btnaddmodify()" v-bind:disabled="buttonShow">添加/修改</button>
    </div>
    <div>
      <table
        border="1"
        cellpadding="10"
        cellspacing="0"
      >
        <tr>
          <th>序号</th>
          <th>图书名称</th>
          <th>创建时间</th>
          <th>操作</th>
        </tr>
        <!-- <tr >
          <td ></td>
          <td></td>
          <td></td>
          <td>
            <button >删除</button>
            <button >编辑</button>
          </td>
        </tr> -->
        <my-getdata :name="item.name" :date="item.date"  :id="item.id" v-for="item in list" :key="item.id" />
      </table>
    </div>

    <my-add />
    <my-deletedata/>
    <!-- 获取列表数据用v-for循环并渲染出来活的数据 -->

  </div>
</template>

<script>
import axios from 'axios'
import MyAdd from '../src/components/MyAdd.vue'
import MyGetdata from '../src/components/MyGetdata.vue'
import MyDeletedata from '../src/components/MyDeletedata.vue'
console.log(axios)
axios.defaults.baseURL = 'http://liufusong.top:4000/'
export default {

  components: {
    MyGetdata,
    MyAdd,
    MyDeletedata

  },
  data () {
    return {
      list: [],
      form: {
        name: ''
      },
      buttonShow: false
      // name: ''

    }
  },

  created () {
    this.getGoods()
  },

  methods: {
    // 获取商品列表
    async getGoods () {
      try {
        const res = await axios({
          url: 'books',
          methods: 'GET'
        })
        console.log(res)

        this.list = res.data
      } catch (error) {
        alert('获取数据失败')
      }
    },

    async checkinput () {
      if (this.form.name.trim() === '') {
        return
      }
      const res = await axios({
        url: 'books/book/' + this.form.name,
        method: 'GET'
      })
      console.log(res.data.status)

      // 1表示存在 2表示不存在
      if (res.data.status === 1) {
        // alert('图书名称' + this.form.name + '存在')
        // this.buttonShow = false
        // this.getGoods()
        // this.form.name = ''
        // this.buttonShow = true
        this.buttonShow = true
      } else {
        this.buttonShow = false
      }
    },
    // 测试图书添加功能是否添加成功
    async btnaddmodify () {
      // 添加图书成功 联动上面input表单v-model 把data中的form传进这里的data
      // 1. 查询图书是否存在

      try {
        if (this.form.name.trim() === '') {
          return
        }
        const res = await axios({
          url: 'books/book/' + this.form.name,
          method: 'GET'
        })
        console.log(res.data.status)

        // 1表示存在 2表示不存在
        if (res.data.status === 1) {
          // alert('图书名称' + this.form.name + '存在')
          this.buttonShow = false
          this.getGoods()
          this.form.name = ''
        } else {
          alert('图书名称不存在：' + this.form.name + '不存在')

          axios({
            url: 'books',
            method: 'POST',
            data: this.form
          }).then(res => {
            console.log(res)
          })
          console.log('添加成功')
          alert('添加成功')
          this.buttonShow = true
          this.getGoods()
        }

        // this.list = res.data
      } catch (error) {
        alert('获取数据失败')
      }
      // 1.1 如果存在 则  使得添加按钮失效
      //  1.2 如果不存在  则  进行添加
    }
    // 判断接口是否存在

  }
}
</script>

<style scoped lang='less'>

</style>
